<template>
  <div>
    <a-card
      :bordered="false"
      style="
        margin-bottom: 10px;
        height: calc(100vh - 130px);
        padding-left: 20px;
      "
    >
      <a-tabs default-active-key="1" @change="callback" style="padding: 15px">
        <a-tab-pane key="1" tab="新客户配置">
          <a-row>
            <a-col :span="18">
              <a-row style="margin-top: 15px">
                <a-col :span="24">
                  <span class="title">新客户分配设置 </span>
                </a-col>
              </a-row>
              <a-row style="margin-top: 10px; margin-left: 20px">
                <a-col :span="24">
                  <a-switch v-model="form.isNewShareOpen" />
                  <span>&nbsp;&nbsp;分配新客户的时间段&nbsp;&nbsp;</span>
                  <a-time-picker
                    placeholder="开始时间"
                    v-model="form.newShareStartTime"
                    valueFormat="HH:mm:ss"
                  ></a-time-picker
                  >&nbsp;&nbsp;
                  <a-time-picker
                    placeholder="结束时间"
                    v-model="form.newShareEndTime"
                    valueFormat="HH:mm:ss"
                  ></a-time-picker>
                </a-col>
              </a-row>

              <a-row style="margin-top: 10px; margin-left: 20px">
                <a-col :span="24" style="text-align: center">
                  <a-button type="primary" @click="updateBizBusinessSetInfo"
                    >保存配置</a-button
                  >
                </a-col>
              </a-row>
            </a-col>
          </a-row>
        </a-tab-pane>
        <a-tab-pane key="2" tab="重复客户配置" v-if="false">
          <a-row>
            <a-col :span="18">
              <a-row style="margin-top: 15px">
                <a-col :span="24">
                  <span class="title">撞库客户分配设置 </span>
                </a-col>
              </a-row>
              <a-row style="margin-top: 10px; margin-left: 20px">
                <a-col :span="24">
                  <a-switch v-model="form.isZkShareOpen" />
                  <span>&nbsp;&nbsp;分配撞库客户的时间段&nbsp;&nbsp;</span>
                  <a-time-picker
                    placeholder="开始时间"
                    v-model="form.zkShareStartTime"
                    valueFormat="HH:mm:ss"
                  ></a-time-picker
                  >&nbsp;&nbsp;
                  <a-time-picker
                    placeholder="结束时间"
                    v-model="form.zkShareEndTime"
                    valueFormat="HH:mm:ss"
                  ></a-time-picker>
                </a-col>
              </a-row>

              <a-row style="margin-top: 10px; margin-left: 20px">
                <a-col :span="24" style="text-align: center">
                  <a-button type="primary" @click="updateBizBusinessSetInfo"
                    >保存配置</a-button
                  >
                </a-col>
              </a-row>
            </a-col>
          </a-row>
        </a-tab-pane>

        <a-tab-pane key="3" tab="公海流转配置">
          <a-row>
            <a-col :span="18">
              <a-row v-if="false">
                <a-col :span="24">
                  <span class="title">已成交客户自动变更设置</span>
                  <span class="destptions"
                    >（提示：此项为单独设置与其它设置不关联.）</span
                  >
                </a-col>
              </a-row>
              <a-row v-if="false" style="margin-top: 10px; margin-left: 20px">
                <a-col :span="24">
                  <a-tooltip>
                    <template slot="title">
                      选择后，有进件状态为【已放款】的客户将自动进入已成交客户列表。不选择，只有客户状态为【成交客户】的客户才会进入已成交客户列表。
                    </template>
                    <a-icon
                      type="info-circle"
                      theme="filled"
                      style="color: rgb(248, 98, 62)"
                    />
                  </a-tooltip>
                  <span> 进件状态为：</span>
                  <a-select
                    style="width: 120px"
                    v-model="form.jinjianStatusValue"
                  >
                    <a-select-option key="yfk" value="yfk"
                      >已放款</a-select-option
                    >
                    <a-select-option key="dfk" value="dfk"
                      >待放款</a-select-option
                    >
                    <a-select-option key="jjz" value="jjz"
                      >进件中</a-select-option
                    >
                  </a-select>
                  <span>，客户状态自动变更为【成交客户】。</span>
                </a-col>
              </a-row>
              <a-row style="margin-top: 15px">
                <a-col :span="24">
                  <span class="title">客户经理管理设置</span>
                </a-col>
              </a-row>
              <a-row style="margin-top: 10px; margin-left: 20px">
                <a-col :span="8">
                  <a-tooltip>
                    <template slot="title">
                      每个客户经理都可以锁定自己的客户，
                      不受自动转入公海的规则影响
                    </template>
                    <a-icon
                      type="info-circle"
                      theme="filled"
                      style="color: rgb(248, 98, 62)"
                    />
                  </a-tooltip>
                  <span>&nbsp;&nbsp;</span>
                  <span>最多可锁定客户数量：</span>
                  <a-input-number
                    :min="0"
                    :max="1000000"
                    v-model="form.managerLockNums"
                  ></a-input-number> </a-col
                ><a-col :span="8"
                  ><span>最多可锁定时长：</span>
                  <a-input-number
                    :min="0"
                    :max="1000000"
                    v-model="form.managerLockTimes"
                  ></a-input-number
                  >&nbsp;小时</a-col
                ><a-col :span="8"
                  ><span>最多领取客户数量：</span>
                  <a-input-number
                    :min="0"
                    :max="1000000"
                    v-model="form.moreCustomerCounts"
                  ></a-input-number
                  >&nbsp;</a-col
                ></a-row
              >
              <a-row style="margin-top: 15px">
                <a-col :span="24">
                  <span class="title">客户自动转入公海设置 </span>
                  <span class="destptions"
                    >（提示：针对我的客户，锁定状态的客户不受该规则影响）</span
                  >
                </a-col>
              </a-row>
              <a-row style="margin-top: 10px; margin-left: 20px">
                <a-col :span="24">
                  <a-switch v-model="form.isCustomerToGonghai" />
                  <span>&nbsp;&nbsp;客户从公海被领取后&nbsp;&nbsp;</span>
                  <a-input-number
                    :min="0"
                    :max="1000000"
                    v-model="form.customerToGonghaiTimes"
                  ></a-input-number>
                  <span
                    >&nbsp;&nbsp;(小时)内，未进行跟进，客户自动转入公海。</span
                  >
                </a-col>
                <a-col :span="24" style="margin-top: 10px"
                  ><a-switch v-model="form.isOneStatus" />
                  <span>&nbsp;&nbsp;客户被分配后，前&nbsp;&nbsp;</span>
                  <a-input-number
                    :min="0"
                    :max="1000000"
                    v-model="form.contactTimesToGonghaiOne"
                  ></a-input-number>
                  <span>&nbsp;&nbsp;(天)内，未连续跟进</span>
                  <!-- <a-select
                    style="width: 160px"
                    v-model="form.oneStatus"
                    placeholder="客户跟进状态"
                    allow-clear
                  >
                    <a-select-option
                      v-for="(d, index) in busProgressOption"
                      :key="index"
                      :value="d.dictValue"
                      >{{ d.dictLabel }}</a-select-option
                    >
                  </a-select> -->
                  <span>，客户自动转入公海。</span></a-col
                ><a-col :span="24" style="margin-top: 10px"
                  ><a-switch v-model="form.isTwoStatus" />
                  <span>&nbsp;&nbsp;客户被跟进后&nbsp;&nbsp;</span>
                  <a-input-number
                    :min="0"
                    :max="1000000"
                    v-model="form.contactTimesToGonghaiTwo"
                  ></a-input-number>
                  <span>&nbsp;&nbsp;(天)内，未再跟进，</span>
                  <!-- <a-select
                    style="width: 160px"
                    v-model="form.twoStatus"
                    placeholder="客户跟进状态"
                    allow-clear
                  >
                    <a-select-option
                      v-for="(d, index) in busProgressOption"
                      :key="index"
                      :value="d.dictValue"
                      >{{ d.dictLabel }}</a-select-option
                    >
                  </a-select> -->
                  <span>客户自动转入公海。</span></a-col
                ><!--<a-col :span="24" style="margin-top: 10px"
                  ><a-switch v-model="form.isThreeStatus" />
                  <span>&nbsp;&nbsp;客户被领取后&nbsp;&nbsp;</span>
                  <a-input-number
                    min="0"
                    max="1000000"
                    v-model="form.contactTimesToGonghaiThree"
                  ></a-input-number>
                  <span>&nbsp;&nbsp;(小时)内未进行跟进，</span>
                  <a-select
                    style="width: 160px"
                    v-model="form.threeStatus"
                    placeholder="客户跟进状态"
                    allow-clear
                  >
                    <a-select-option
                      v-for="(d, index) in busProgressOption"
                      :key="index"
                      :value="d.dictValue"
                      >{{ d.dictLabel }}</a-select-option
                    >
                  </a-select>
                  <span>，客户自动转入公海。</span></a-col
                > -->
              </a-row>

              <a-row style="margin-top: 15px">
                <a-col :span="24">
                  <span class="title">线索自动转入公海设置 </span>
                  <span class="destptions">（提示：针对线索池客户）</span>
                </a-col>
              </a-row>
              <a-row style="margin-top: 10px; margin-left: 20px">
                <a-col :span="24">
                  <a-switch v-model="form.isGetXianSuoToGonghai" />
                  <span>&nbsp;&nbsp;客户从公海被领取后，连续&nbsp;&nbsp;</span>
                  <a-input-number
                    :min="0"
                    :max="1000000"
                    v-model="form.xianSuoToGonghaiTimes"
                  ></a-input-number>
                  <span
                    >&nbsp;&nbsp;(小时)内未进行跟进，客户自动转入公海。</span
                  >
                </a-col>
                <!-- <a-col :span="24" style="margin-top: 10px"
                  ><a-switch v-model="form.isXianSuoStatus" />
                  <span>&nbsp;&nbsp;客户被领取后&nbsp;&nbsp;</span>
                  <a-input-number
                    min="0"
                    max="1000000"
                    v-model="form.contactTimesToGonghaiByXianSuoChi"
                  ></a-input-number>
                  <span>&nbsp;&nbsp;(小时)内未进行跟进，</span>

                  <a-select
                    style="width: 160px"
                    v-model="form.xianSuoChiStatus"
                    placeholder="客户跟进状态"
                    allow-clear
                  >
                    <a-select-option
                      v-for="(d, index) in busProgressOption"
                      :key="index"
                      :value="d.dictValue"
                      >{{ d.dictLabel }}</a-select-option
                    >
                  </a-select>
                  <span>，客户自动转入公海。</span>
                </a-col> -->
              </a-row>

              <a-row style="margin-top: 15px">
                <a-col :span="24">
                  <span class="title">公海领取设置 </span>
                  <span class="destptions">（提示：分单不受规则影响）</span>
                </a-col>
              </a-row>
              <a-row style="margin-top: 10px; margin-left: 20px">
                <a-col :span="24">
                  <a-switch v-model="form.isTime" />
                  <span
                    >&nbsp;&nbsp;允许员工在公海领取客户的时间段&nbsp;&nbsp;</span
                  >
                  <a-time-picker
                    placeholder="开始时间"
                    v-model="form.startTime"
                    valueFormat="HH:mm:ss"
                  ></a-time-picker
                  >&nbsp;&nbsp;
                  <a-time-picker
                    placeholder="结束时间"
                    v-model="form.endTime"
                    valueFormat="HH:mm:ss"
                  ></a-time-picker>
                </a-col>
              </a-row>
              <a-row style="margin-top: 15px">
                <a-col :span="24">
                  <span class="title">重复客户标记设置 </span>
                </a-col>
              </a-row>
              <a-row style="margin-top: 10px; margin-left: 20px">
                <a-col :span="24">
                  <a-switch v-model="form.isRepMarkTimes" />
                  <span>&nbsp;&nbsp;标记持续时长（天）</span>
                  <a-tooltip>
                    <template slot="title">
                      在没有重复导入操作下，标记存在的最长时间
                    </template>
                    <a-icon
                      type="info-circle"
                      theme="filled"
                      style="color: rgb(248, 98, 62)"
                    />
                  </a-tooltip>
                  &nbsp;&nbsp;
                  <a-input-number
                    :min="0"
                    :max="1000000"
                    v-model="form.repMarkTimes"
                  ></a-input-number>
                </a-col>
              </a-row>
              <a-row style="margin-top: 10px; margin-left: 20px">
                <a-col :span="24" style="text-align: center">
                  <a-button type="primary" @click="updateBizBusinessSetInfo"
                    >保存配置</a-button
                  >
                </a-col>
              </a-row>
            </a-col>
          </a-row>
        </a-tab-pane>

        <a-tab-pane key="4" tab="未接流转配置">
          <a-row>
            <a-col :span="18">
              <a-row style="margin-top: 15px">
                <a-col :span="24">
                  <span class="title">未接客户分配设置 </span>
                </a-col>
              </a-row>
              <a-row style="margin-top: 15px">
                <a-col :span="24" style="margin-top: 10px">
                  <a-switch v-model="form.isWjWorkTimeOpen" />
                  <span>&nbsp;&nbsp;工作时间段&nbsp;&nbsp;</span>
                  <a-tooltip>
                    <template slot="title">
                      计算未接时间时，只会计算工作时间段，非工作时间段不计算在内。
                    </template>
                    <a-icon
                      type="info-circle"
                      theme="filled"
                      style="color: rgb(248, 98, 62)"
                    />
                  </a-tooltip>
                  &nbsp;&nbsp;
                  <a-time-picker
                    placeholder="开始时间"
                    v-model="form.wjWorkStartTime"
                    valueFormat="HH:mm:ss"
                  ></a-time-picker
                  >&nbsp;&nbsp;
                  <a-time-picker
                    placeholder="结束时间"
                    v-model="form.wjWorkEndTime"
                    valueFormat="HH:mm:ss"
                  ></a-time-picker>
                </a-col>
              </a-row>
              <a-row style="margin-top: 15px">
                <a-col :span="24" style="margin-top: 10px">
                  <a-switch v-model="form.isWjTimesOpen" />
                  <span>&nbsp;&nbsp;拨打电话未接&nbsp;&nbsp;</span>
                  <a-input-number
                    :min="0"
                    :max="100"
                    v-model="form.wjTimes"
                  ></a-input-number>
                  <span>&nbsp;&nbsp;(小时)，客户自动流转。</span>
                </a-col>
              </a-row>
              <a-row style="margin-top: 15px">
                <a-col :span="24" style="margin-top: 10px">
                  <a-switch v-model="form.isWjCountsOpen" />
                  <span>&nbsp;&nbsp;拨打电话&nbsp;&nbsp;</span>
                  <a-input-number
                    :min="0"
                    :max="100"
                    v-model="form.wjCounts"
                  ></a-input-number>
                  <span>&nbsp;&nbsp;(次)未接，客户自动流转。</span>
                </a-col>
              </a-row>

              <a-row style="margin-top: 10px; margin-left: 20px">
                <a-col :span="24" style="text-align: center">
                  <a-button type="primary" @click="updateBizBusinessSetInfo"
                    >保存配置</a-button
                  >
                </a-col>
              </a-row>
            </a-col>
          </a-row>
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </div>
</template>
<script>
import {
  delBizBusinessSet,
  exportBizBusinessSet,
  getBizBusinessSet,
  updateBizBusinessSet,
} from "@/api/biz/bizBusinessSet";

export default {
  name: "BizBusinessSet",
  components: {},
  data() {
    return {
      showAddModal: false,
      showEditModal: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 选中的主键集合
      selectedRowKeys: [],
      // 选中的数据集合
      selectedRows: [],
      // 高级搜索 展开/关闭
      advanced: false,
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // label的百分比
      labelCol: { span: 6 },
      // 内容区域的百分比
      wrapperCol: { span: 18 },
      // 业务设置表格数据
      bizBusinessSetList: [],
      form: { id: "index_set" },
      busProgressOption: [],
    };
  },
  created() {
    this.getDicts("bus_progress").then((response) => {
      this.busProgressOption = response.data;
    });
    this.getBizBusinessSetInfo();
  },
  methods: {
    callback(key) {},
    /** 查询业务设置列表 */
    getBizBusinessSetInfo() {
      const bizBusinessSetId = this.form.id;
      getBizBusinessSet(bizBusinessSetId).then((response) => {
        this.form = response.data;
        this.form.isCustomerToGonghai =
          this.form.isCustomerToGonghai === 1 || false;
        this.form.isOneStatus = this.form.isOneStatus === 1 || false;
        this.form.isTwoStatus = this.form.isTwoStatus === 1 || false;
        this.form.isThreeStatus = this.form.isThreeStatus === 1 || false;
        this.form.isGetXianSuoToGonghai =
          this.form.isGetXianSuoToGonghai === 1 || false;
        this.form.isXianSuoStatus = this.form.isXianSuoStatus === 1 || false;
        this.form.isTime = this.form.isTime === 1 || false;
        this.form.isRepMarkTimes = this.form.isRepMarkTimes === 1 || false;

        this.form.isNewShareOpen = this.form.isNewShareOpen === 1 || false;
        this.form.isZkShareOpen = this.form.isZkShareOpen === 1 || false;

        this.form.isWjWorkTimeOpen = this.form.isWjWorkTimeOpen === 1 || false;
        this.form.isWjTimesOpen = this.form.isWjTimesOpen === 1 || false;
        this.form.isWjCountsOpen = this.form.isWjCountsOpen === 1 || false;
        console.log("this.form", this.form);
      });
    },

    updateBizBusinessSetInfo() {
      const form = { ...this.form };
      form.isCustomerToGonghai = this.form.isCustomerToGonghai ? 1 : 0;
      form.isOneStatus = this.form.isOneStatus ? 1 : 0;
      form.isTwoStatus = this.form.isTwoStatus ? 1 : 0;
      form.isThreeStatus = this.form.isThreeStatus ? 1 : 0;
      form.isGetXianSuoToGonghai = this.form.isGetXianSuoToGonghai ? 1 : 0;
      form.isXianSuoStatus = this.form.isXianSuoStatus ? 1 : 0;
      form.isTime = this.form.isTime ? 1 : 0;
      form.isRepMarkTimes = this.form.isRepMarkTimes ? 1 : 0;

      form.isNewShareOpen = this.form.isNewShareOpen ? 1 : 0;
      form.isZkShareOpen = this.form.isZkShareOpen ? 1 : 0;

      form.isWjWorkTimeOpen = this.form.isWjWorkTimeOpen ? 1 : 0;
      form.isWjTimesOpen = this.form.isWjTimesOpen ? 1 : 0;
      form.isWjCountsOpen = this.form.isWjCountsOpen ? 1 : 0;

      const saveForm = JSON.parse(JSON.stringify(form));
      updateBizBusinessSet(saveForm).then((response) => {
        this.$message.success("修改成功", 3);
        this.open = false;
        this.$emit("ok");
        this.$emit("close");
      });
    },

    busProgressFormat(row) {
      if (row.progress) {
        return this.selectDictLabel(this.progressOptions, row.progress);
      } else {
        return "";
      }
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParam.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParam = {
        pageNum: 1,
        pageSize: 10,
        userId: undefined,

        deptId: undefined,

        userName: undefined,

        deptName: undefined,
      };
      this.handleQuery();
    },
    /** 翻页操作 */
    onShowSizeChange(current, pageSize) {
      this.queryParam.pageSize = pageSize;
      this.getList();
    },
    /** 翻页操作 */
    onSizeChange(current, size) {
      this.queryParam.pageNum = 1;
      this.queryParam.pageSize = size;
      this.getList();
    },
    /** 翻页操作 */
    changeSize(current, pageSize) {
      this.queryParam.pageNum = current;
      this.queryParam.pageSize = pageSize;
      this.getList();
    },
    /** 翻页操作 */
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys;
      this.selectedRows = selectedRows;
      this.ids = this.selectedRows.map((item) => item.id);
      this.single = selectedRowKeys.length !== 1;
      this.multiple = !selectedRowKeys.length;
    },
    /** 查询折叠和展开操作 */
    toggleAdvanced() {
      this.advanced = !this.advanced;
    },
    handleAdd() {
      this.showAddModal = true;
      this.$nextTick(() => this.$refs.bizBusinessSetAddForm.handleAdd());
    },
    handleUpdate(record, ids) {
      this.showEditModal = true;
      this.$nextTick(() =>
        this.$refs.bizBusinessSetEditForm.handleUpdate(record, ids)
      );
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      var that = this;
      const bizBusinessSetIds = row.id || this.ids;
      this.$confirm({
        title: "确认删除所选中数据?",
        onOk() {
          return delBizBusinessSet(bizBusinessSetIds).then(() => {
            that.onSelectChange([], []);
            that.getList();
            that.$message.success("删除成功", 3);
          });
        },
        onCancel() {},
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      var that = this;
      this.$confirm({
        title: "是否确认导出?",
        content: "此操作将导出当前条件下所有数据而非选中数据",
        onOk() {
          return exportBizBusinessSet(that.queryParam).then((response) => {
            that.download(response.msg);
            that.$message.success("导出成功", 3);
          });
        },
        onCancel() {},
      });
    },
  },
};
</script>

<style>
.title {
  font-size: 16px;
  font-weight: 700;
  color: #333;
  clear: both;
  margin: 0;
  padding: 0 0 25px;
}

.destptions {
  color: #999;
  font-size: 12px;
}
</style>
